<%-- 
    Document   : Employee
    Created on : May 9, 2012, 9:28:43 AM
    Author     : Thanh Luan
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core" %>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@taglib prefix="rich" uri="http://richfaces.org/rich" %>
<%@taglib prefix="a4j" uri="http://richfaces.org/a4j" %>

<html>
    <head>

        <script type="text/javascript" language="javascript" src="../scripts/jQuery/jquery.fancybox-1.3.4.pack.js"></script>
        <link rel="stylesheet" type="text/css" href="../scripts/tabs/slidingtabs-horizontal.css">
        <script type="text/javascript" src="../scripts/tabs/slidetab.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/thickbox.css"/>
        <link rel="stylesheet" type="text/css" href="../css/dropdown.css"/>
        <script type="text/javascript" language="javascript" src="../scripts/jQuery/thickbox.js"></script>
        <script type="text/javascript">
            $j(document).ready(function() {
                initThickBox('.thickbox');
                $j(".department2").live("click", function() {

                    fh200 = $j(".donvi").attr("lang");
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                    emp = $j('.cbx_editEmp').children("option:selected").val();
                    fis = $j('.fis').attr('lang');
                    //   showPleaseWait(); 
                    $j.post("N450_N850.jsp?&action=group&fh200=" + fh200 + "&fn450=" + fn450 + "&fn850=" + fn850, function(data) {
                        if (data != null) {
                            window.location.href = "project.jsp?action=loadproject&fis=" + fis;
                            //       hidePleaseWait();        
                        }
                    });
                });
                $j('.loadproject').live('click', function() {
                    fis = $j(this).attr('lang');
                    emp = $j('.cbx_editEmp').children("option:selected").val();
                    showPleaseWait();
                    window.location.href = "project.jsp?action=loadproject&fis=" + fis;
                });
                $j(".department3").live("click", function() {
                    fh200 = $j(".donvi").attr("lang");
                    fn850 = $j(this).attr("lang");
                    fn450 = $j(".department1").attr("lang");
                    emp = $j('.cbx_editEmp').children("option:selected").val();
                    fis = $j('.fis').attr('lang');
                    $j.post("N450_N850.jsp?&action=group&fh200=" + fh200 + "&fn450=" + fn450 + "&fn850=" + fn850, function(data) {
                        if (data != null) {
                            window.location.href = "project.jsp?action=loadproject&fis=" + fis;
                        }
                    });
                });
                $j(".cbx_editEmp").live("change", function() {
                    fn850 = $j(".department2").attr("lang");
                    emp = $j('.cbx_editEmp').children("option:selected").val();
                    fis = $j('.fis').attr('lang');
                    showPleaseWait();
                    $j.post("N450_N850.jsp?fn850=" + fn850 + "&emp=" + emp, function(data) {
                        if (data != null) {
                            window.location.href = "project.jsp?action=loadproject&fis=" + fis;
                            hidePleaseWait();
                        }
                    });
                });
                $j('.text_search').live('keyup', function() {
                    if ($j('.text_search').val() == "") {
                        $j('.noteRow').show();
                        $j('.close').trigger('click');

                    } else {
                        $j('.close').trigger('click');
                        $j('.noteRow').hide();
                        $j('.noteRow').each(function() {
                            html = $j(this).html();
                            if (ununicode(html).indexOf(ununicode($j('.text_search').val())) > -1) {
                                $j(this).show();
                            } else {
                                $j(this).hide();
                            }
                        });
                    }

                });
                $j('.icondots').live('hover', function() {
                    $j(this).next('.addgroup').css('display', 'block');
                    $j(this).next('.addgroup').css('z-index', '999');
                });
                $j('.icondots').live('mouseout', function() {
                    $j(this).next('.addgroup').css('display', 'none');
                });
                $j('.search_boxp').hide();
                $j('.sidebar_search').live('click', function() {
                    $j('.search_boxp').hide();
                    if ($j(this).next().hasClass('active')) {

                        $j('.search_boxp').removeClass('active');
                    } else {

                        $j('.search_boxp').removeClass('active');
                        $j(this).next().addClass('active');
                        $j(this).next().show();
                    }
                });
            });
        </script>

    </head>
    <body>
        <div id="togglesms">
        </div>
        <a4j:form>
            <a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" />
            <f:loadBundle basename="#{environmentSession.localizationSource}" var="locale"/>
            <%-- <h:outputText value="<div class='permission' lang='#{loginSession.right.MENU_EMP_VIEW}'></div>" escape="false"/> --%>
            <div id="content">
                <div id="menu_top">
                    <div class="dropdown">
                        <div class="select_choise">
                            <a href="#"><span>Khu vực</span></a>
                        </div>
                        <div class="select_hidden">
                            <ul>

                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                                <li><a href="#"><span>Filter Cấp 3</span></a></li>
                            </ul>
                        </div>
                    </div>
                    <h:panelGroup>
                        <div class="dropdown">
                            <div class="select_choise">
                                <a href="#">
                                    <span class="department2" lang="<h:outputText value="#{n450_n850.fn850}"/>">
                                        <h:outputText rendered="#{n450_n850.fn850 !=0}" value="#{n450_n850.nv851}"/>
                                        <h:outputText rendered="#{n450_n850.fn850 ==0}" value="Tất cả"/>
                                    </span>
                                </a>

                            </div>
                            <div class="select_hidden departmentlistN850">

                                <ul>
                                    <li><a href="#"><span class="department3" lang="<h:outputText value="0"/>">
                                                <h:outputText value="Tất cả"/>
                                            </span></a></li>                          


                                    <a4j:repeat value="#{n450_n850.listComb850}" var="item">
                                        <li><a href="#"><span class="department2" lang="<h:outputText value="#{item.value}"/>">
                                                    <h:outputText value="#{item.label}"/>
                                                </span></a></li> 
                                            </a4j:repeat>
                                </ul>
                            </div>
                        </div>

                    </h:panelGroup>
                    <div style="float:left;margin-right: 2px;margin-left: 2px;" class="imgFancybox">
                        <h:outputLink  value="editworkProject.jsp?action=addnew&page=project.jsp&height=5px&width=600px" styleClass="fancybox add_new" id="fancybox1">
                            <h:graphicImage title="Add công việc" value="../images/icon_addTour.png"/>
                        </h:outputLink>


                    </div>
                    <div style="float:left;margin-left: 2px;margin-right: 2px;" class="imgFancybox">
                        <div class="sidebar_row2">
                            <h:panelGroup >
                                <div class="sidebar">
                                    <div class="sidebar_search">

                                    </div>
                                    <div class="search_boxp">

                                        <div style="float:left"> <h3><h:outputText value="#{locale.list_project}"/></h3></div>
                                        <div class="divListPro">
                                            <a4j:repeat value="#{projectController.listProjectAll}" var="item" rowKeyVar="row">
                                                <div class="fields_select project"  style="width:100%;<h:outputText value="background:#C4C5C6;" rendered="#{row%2==0}"/>">

                                                    <div class="touchipad" style="width:90%;float: left;">
                                                        <h:outputText style="color:#2B3844;" value="#{row+1}">
                                                            <f:convertNumber  pattern="#00"></f:convertNumber>
                                                        </h:outputText>.&nbsp;<h:outputText  value="#{item.BV051}"/></div> 
                                                    <div class="item_project" style="width:10%;float: left;">
                                                        <h:outputLink   value="editpersonalProject.jsp?pb050=#{item.PB050}&height=300px&width=500px" styleClass="fancybox" id="group">
                                                            <img class="image" src="../images/group.png" alt="Tổ/Nhóm" title="group"/>
                                                        </h:outputLink>
                                                    </div>
                                                </div>
                                            </a4j:repeat>
                                        </div>
                                        <div class="divAddproject">
                                            <h:outputLink  value="editManagerproject.jsp?action=add&page=project.jsp&height=236px&width=405px" styleClass="buttonaddPro fancybox"> Thêm dự án</h:outputLink>
                                            </div>
                                        </div>
                                    </div>
                            </h:panelGroup>
                        </div>
                    </div>
                    <div style="float:left;margin-right: 2px;margin-left: 2px;" class="imgFancybox">
                       <div class="classimageSMS">
                            <img src="../images/smsnew.png" class="sendSMS_person" lang="page=sendSMSitemEmployee" title="Xác nhận  SMS"/>
                        </div>


                    </div>
                    
                     <div style="float:left;margin-left: 2px;margin-right: 2px;" class="imgFancybox">                                   
                        <div class="fillterby">
                            <div class="dropdownby dropdownp">
                                <div class="select_choise ">
                                    <ul>
                                        <li><a>
                                                <h:panelGroup rendered="#{c150Controller.fis == 0}">
                                                    <img src="../images/icon_list.png" alt="" title="Đang triển khai" lang="0"  class="loadproject fis"/>
                                                    <%-- <h:outputText styleClass="loadproject fis" lang="0" rendered="#{c150Controller.fis == 0}" value="Đang triển khai"/> --%>
                                                </h:panelGroup>
                                                <h:panelGroup rendered="#{c150Controller.fis == 2}"> 
                                                    <img src="../images/icon_list.png" alt="" title="Công việc đã giao" lang="2"  class="loadproject fis"/> 
                                                </h:panelGroup>
                                                <h:panelGroup rendered="#{c150Controller.fis == 1}">  
                                                    <img src="../images/icon_list.png" alt="" title="HT trong ngày" lang="1"  class="loadproject fis"/>
                                                    <%--   <h:outputText styleClass="loadproject fis"  lang="1" rendered="#{c150Controller.fis == 1}" value="HT trong ngày"/> --%>
                                                </h:panelGroup>
                                                <h:panelGroup rendered="#{c150Controller.fis == 7 }">
                                                    <img src="../images/icon_list.png" alt="" title="HT trong tuần" lang="7"  class="loadproject fis"/>
                                                    <%--   <h:outputText styleClass="loadproject fis"  lang="7" rendered="#{c150Controller.fis == 7}" value="HT trong tuần"/> --%>
                                                </h:panelGroup>
                                                <h:panelGroup rendered="#{c150Controller.fis == 30}">  
                                                    <img src="../images/icon_list.png" alt="" title="HT trong tháng" lang="30"  class="loadproject fis"/>
                                                    <%--  <h:outputText styleClass="loadproject fis"  lang="30" rendered="#{c150Controller.fis == 30}" value="HT trong tháng"/> --%>
                                                </h:panelGroup>
                                            </a>
                                        </li>
                                    </ul>

                                </div>
                                <div class="select_hidden">
                                    <ul>
                                        <h:panelGroup>
                                            <li>
                                                <a>  <h:outputText value="Đang triển khai" styleClass="loadproject"  lang="0"/> </a>
                                            </li>
                                        </h:panelGroup>
                                        <h:panelGroup >
                                            <li> 
                                                <a>  <h:outputText value="Công việc đã giao" styleClass="loadproject"  lang="2"/> </a>
                                            </li>
                                        </h:panelGroup>    
                                        <h:panelGroup >
                                            <li> 
                                                <a>  <h:outputText value="HT trong ngày" styleClass="loadproject"  lang="1"/> </a>
                                            </li>
                                        </h:panelGroup>
                                        <h:panelGroup>
                                            <li>
                                                <a>  <h:outputText value="HT trong tuần" styleClass="loadproject"  lang="7"/> </a>
                                            </li>
                                        </h:panelGroup>
                                        <h:panelGroup>
                                            <li>
                                                <a>  <h:outputText value="HT trong tháng" styleClass="loadproject"  lang="30"/> </a>
                                            </li>
                                        </h:panelGroup>
                                    </ul>
                                </div>
                            </div>
                        </div>                         
                    </div>
                    <div style="float:left;margin-right: 2px;margin-left: 2px;" class="imgFancybox">
                        <h:outputLink  value="managerSale.jsp?#{kapiMenu.md5url}">
                            <h:graphicImage title="SALE" value="../images/label_sale.png"/>
                        </h:outputLink>

                    </div>
                    <div style="float:left;margin-left: 2px;">
                        <h:panelGroup>

                            <h:selectOneMenu id="N1000" value="#{c150Controller.empId}" style="width:180px;height:26px;"  styleClass="cbx_editEmp">
                                <f:selectItems value="#{c150Controller.combN100Pro}" />
                            </h:selectOneMenu>
                        </h:panelGroup>
                    </div>
                   <div style="float:right;height: 25px;width: 20%;border:1px solid #B2B7BB;">
                        <h:inputText style="  float: left;height: 25px; margin-left: 0;width: 86%;"  value="#{EmpBean.keySearch}" onfocus="if(this.value=='#{EmpBean.keySearch}')this.value='';" styleClass="text_search"/>

                        <div class="buttonsearch" style="float:left;">
                            <%--      <div class="group cssgroup" >
                                      <h:selectOneRadio layout="pageDirection" value="#{EmpBean.typeSearch}" styleClass="feild_sex"  style="margin-left:5px; margin-top:14px; padding:15px; width:195px; height:154px;"   >
                                          <f:selectItem itemValue="0" itemLabel="Tất cả"/>
                                          <f:selectItem itemValue="1" itemLabel="Ðiện thoại"/>
                                          <f:selectItem itemValue="2" itemLabel="Họ tên"/>
                                          <f:selectItem itemValue="3" itemLabel="CMND/Passport"/>
                                          <f:selectItem itemValue="4" itemLabel="Email"/>
                                          <f:selectItem itemValue="5" itemLabel="MSNV"/>
                                      </h:selectOneRadio>
                                      <h:commandButton action="#{EmpBean.reload}" value="#{locale.search}" style="margin-left:75px; margin-top:5px;" styleClass="buttonsearch2">
                                      </h:commandButton>
                                  </div>--%>
                        </div>
                    </div>
                </div>

                <div id="content_detail">
                    <div class="fillter">
                        <div class="dropdown">
                            <h:panelGroup id="reload5">
                                <h:panelGroup  rendered="#{EmpBean.fk400 > 0}" >
                                    <div class="select_choise ">
                                        <a href="#"><span><h:outputText value="Action"/></span></a>
                                    </div>
                                    <div class="select_hidden">
                                        <ul>
                                            <li>
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="addgroupcustomer.jsp?action=loadGroup&page=employeenew.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=453&amp;width=941&amp;modal=true" styleClass="thickbox add_new" id="thickbox2"  >
                                                    <span> <h:outputText value="#{locale.add_group}"/></span>
                                                </h:outputLink>
                                            </li>
                                            <li >
                                                <h:outputLink rendered="#{EmpBean.fk400 > 0}" value="removegroupcustomer.jsp?action=loadGroup&page=employeenew.jsp&pk400=#{EmpBean.fk400}&kv451=N100E&KeepThis=true&amp;TB_iframe=true&amp;height=425&amp;width=952&amp;modal=true" styleClass="thickbox add_new" id="thickbox3"  >
                                                    <span> <h:outputText value="#{locale.delete_group}"/></span>
                                                </h:outputLink>
                                            </li>
                                        </ul>
                                    </div>
                                </h:panelGroup>
                            </h:panelGroup>
                        </div>
                    </div>
                    <div class="content_right">
                        <div class="content" id="">
                            <div class="list_content" style="margin-top: 0px;" >
                                <div style="width: 100% !important;">
                                    <table style="width: 100%">
                                        <tr>
                                            <td class="democolumn" style="width: 2%"><h:outputText value="STT"/></td>                                        
                                            <td class="democolumn" style="width: 10%"><h:outputText value="Action"/></td>
                                            <td class="democolumn" style="width: 12%"><h:outputText value="Tên công việc"/></td> 
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Dự án"/></td>
                                            <td class="democolumn" style="width: 12%"><h:outputText value="Nhân viên"/></td>
                                            <td class="democolumn" style="width: 8%"><h:outputText value="Ngày bắt đầu" /></td>
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Ngày kết thúc"/></td>
                                            <td class="democolumn" style="width: 6%"><h:outputText value="Trạng thái" /></td>
                                            <td class="democolumn" style="width: 12%"><h:outputText value="Người yêu cầu"/></td>
                                            <td class="democolumn" style="width: 12%"><h:outputText  value="Ghi chú"/></td>

                                        </tr>
                                    </table>
                                    <div style="float:left;height: 440px;overflow: auto;width: 100%">
                                        <table style="width: 100%">
                                            <a4j:repeat value="#{c150Controller.lstC150}" var="item" rowKeyVar="index" >
                                                <tr class="noteRow" lang="<h:outputText value="#{item.pc150}"/>">
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center; width: 2%; border-left: 1px solid #C4C0C9;">
                                                        <h:outputText value="#{index+1}"/>
                                                    </td>

                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 10%;">
                                                        <div class="itemaction">
                                                            <h:outputLink rendered="#{c150Controller.fis == 0 || c150Controller.fis == 2}"  value="editworkProject.jsp?action=edit&fis=#{c150Controller.fis}&FC150=#{item.pc150}&emp=#{c150Controller.empId}&FN600=#{item.fn600}&page=project.jsp&height=5px&width=600px" styleClass="fancybox add_new" id="fancybox1">
                                                                <img src="../images/edit.png" alt="edit" title="edit"/>
                                                            </h:outputLink>
                                                            <h:outputLink rendered="#{c150Controller.fis != 0}"  value="editworkProject.jsp?action=edit&fis=#{c150Controller.fis}&FC150=#{item.pc150}&emp=#{c150Controller.empId}&FN600=#{item.fn600}&page=project.jsp&height=5px&width=600px" styleClass="fancybox add_new" id="fancyboxs">
                                                                <img src="../images/edit.png" alt="edit" title="edit"/>
                                                            </h:outputLink>
                                                            <h:outputLink  value="delete.jsp?actionDel=deleteC150&fc150=#{item.pc150}&emp=#{c150Controller.empId}&flag=C150&width=300&height=150" styleClass="fancybox add_new" id="fancybox12">
                                                                <img src="../images/delete_1.png" alt="delete"  title="delete" />
                                                            </h:outputLink>
                                                            <h:outputLink  value="uploadfile.jsp?pc150=#{item.pc150}&page=project.jsp&type=ALL&table=C150&KeepThis=true&amp;TB_iframe=true&amp;height=350&amp;width=550&amp;modal=true" styleClass="thickbox add_new">
                                                                <img  src="../images/docs_icon.png" height="20px" width="20px" title="Add document"/> 
                                                            </h:outputLink>
                                                            <h:outputLink  value="workReport.jsp?FC150=#{item.pc150}&FN600=#{item.fn600}&FC500=#{item.fc500}&action=edit&fis=#{c150Controller.fis}&emp=#{c150Controller.empId}&KeepThis=true&amp;TB_iframe=true&amp;height=453&amp;width=741&amp;modal=true" styleClass="thickbox add_new" >
                                                                <img  src="../images/report.png" height="20px" width="20px" title="Add document"/> 
                                                            </h:outputLink>
                                                        </div>

                                                    </td>
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                        <div style="text-align: left;width: 100%;">
                                                            <h:outputText value="#{item.cv151}  (#{item.cv613})%"/>
                                                        </div>
                                                    </td>

                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 6%">
                                                        <div style="text-align: left;width: 100%;">

                                                            <h:outputLink value="customer4tour.jsp?actionpro=choosevisa&status=T&action=delSS&tab=upitem#{item.fq100}&pv050=#{item.fv050}&codetour=#{item.cv166}&nametour=#{item.cv157}&datetour=&unicodetour=">
                                                                <h:outputText value="#{item.cv166}"/>
                                                            </h:outputLink>
                                                        </div>
                                                    </td>
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%">
                                                        <div style="float:left;width: 90%;"> <h:outputLink  value="editpersonalProject.jsp?&fb050=#{item.pb050}&cd651=#{item.cd153}&fc150=#{item.pc150}&fc500=#{item.fc500}&emp=#{c150Controller.empId}&fn600=#{c150Controller.fn850}&height=300px&width=500px" styleClass="fancybox">
                                                                <h:outputText value="#{item.cv165}"/>
                                                            </h:outputLink>
                                                        </div>
                                                        <div class="icondots" style="float:left;width: 10%;">
                                                            <h:graphicImage value="../images/icon11.png"/>
                                                            <div class="addgroup" style="display:<h:outputText rendered="#{item.lst ==null || item.lst == '' }" value="none"/>">                                                    
                                                                <h:outputText value="#{item.lst}"  escape="false" />
                                                            </div>
                                                        </div>

                                                    </td>
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="width: 8%">
                                                        <div style="text-align: center;width: 100%;">
                                                            <h:outputText value="#{item.cd152}"><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>
                                                            </div>

                                                        </td>
                                                        <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                        <div style="text-align: center;width: 100%;color: #A4211A;font-weight: bold;">
                                                            <h:outputText value="#{item.cd153}"><f:convertDateTime pattern="dd/MM/yyyy"/></h:outputText>
                                                            </div>
                                                        </td>
                                                        <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: center;width: 6%">
                                                        <div class="itemstatus" style="text-align: center;width: 100%;">
                                                            <h:graphicImage rendered="#{item.fc450 == 2}" value="../images/priority_normal_large.png" height="35px" width="35px"/>
                                                            <h:graphicImage rendered="#{item.fc450 == 1}" value="../images/priority_hight_large.png" height="35px" width="35px"/>
                                                            <h:graphicImage rendered="#{item.fc450 == 3}" value="../images/priority_low_large.png" height="35px" width="35px"/>

                                                            <h:graphicImage rendered="#{item.fc500 == 2}" alt="Running" value="../images/running_large.png" height="35px" width="35px"/>
                                                            <h:graphicImage rendered="#{item.fc500 == 1}" alt="Open" value="../images/open_large.png" height="35px" width="35px"/>
                                                            <h:graphicImage rendered="#{item.fc500 == 10}" alt="Finish" value="../images/finish_large.png" height="35px" width="35px"/>
                                                        </div>
                                                    </td>
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width:12%">
                                                        <h:outputText value="#{item.cl199}"/>
                                                    </td>
                                                    <td class="democolumn2 <h:outputText rendered="#{index%2 !=0}"  value="odd"/>" style="text-align: left;width: 12%;border-right:  1px solid #C4C0C9;">
                                                        <div style="width:100%;" id="<h:outputText value="#{item.pc150}" />">
                                                            <h:outputText value="#{item.subString}" id="item_mota"></h:outputText>
                                                            <h:outputText rendered="#{item.lengthCB173 >200}" value="..." />
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td colspan="12">
                                                        <h:panelGroup styleClass="noteContent" >
                                                        </h:panelGroup>
                                                    </td>
                                                </tr>
                                            </a4j:repeat>

                                        </table>
                                    </div>
                                    <div class="fotter-page">
                                        <jsp:include page="../../common/pagingProject.jsp"/>
                                    </div>
                                </div>

                                <!-- End List Content-->    
                            </div>
                            <rich:modalPanel id="ajaxLoadingModalBox" minHeight="30" minWidth="40"
                                             height="30" width="40" zindex="2000">
                                <h:outputText value="#{locale.please_wait}" styleClass="startDummer"></h:outputText>
                            </rich:modalPanel>
                            <rich:modalPanel styleClass="pleaseimage" id="statPane" autosized="true" minHeight="10" minWidth="80"
                                             height="10" width="80" zindex="2000">
                                <h:graphicImage value="/images/loadingAnimation.gif" alt="ai" />
                            </rich:modalPanel>
                        </div>

                    </div>
                </div>

            </a4j:form>
    </body>
    <script type="text/javascript" src="../scripts/webcame/jquery.webcam.js"></script>
</html>
<style>
    #main{
        width:100%;
    }
    #content{
        padding:0px !important;
        width:98.8%;
    }
    #footer{
        width:100%;
    }
    .title_tour{
        width:100%;
    }

    #content_detail {
        float: left;
        width: 100%;
        padding-top: 7px !important;
    }


    #header_content {
        float: right;
        margin-top: 40px;
        width: 87%;
    }
    .webcame{
        background: url("../images/01.png") repeat scroll 0 0 transparent;
        height: 15px;
        width: 27px;
        float:left;
        margin-right:14px;

        cursor: pointer;
    }
    .webcame img{

    }
    .scapture{
        background: none repeat scroll 0 0 #39A3DD;
        height: 321px;
        margin-bottom: 4px;

        margin-top: 16px;
        padding-left: 0;
        position: absolute;
        width: 360px;
        z-index: 200;
        border-radius: 20px;
    }
    .scapture{
        visibility: hidden;

    }
    .fields_more{
        float:left;

        margin-top:44px !important;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .detail_more{
        float:left;
        /* margin-left:254px !important;*/
    }

    .feild_sex tr td {
        float: left !important;
        width: 33%;
    }
    .feild_sex td label{
        color:#000000 !important;
    }

    .buttonsearch2{
        border:0;
        background:url(../images/bg_submit.gif) repeat-x;
        width:68px;

        margin:0px 0 10px 20px;
        color:#ffffff;
        font-size:12px;
        font-weight:bold;
        cursor:pointer;
        border-radius:2px;
        padding:4px 0;
        text-transform:uppercase;
    }
    .mesage{
        color: red;
        float: left;
        margin-left: 252px;
        margin-top: 20px;
        text-transform: uppercase;

    }
    .updateN900{
        color:#fff;
        text-align: left;
        margin-left:8px;
        cursor: pointer;
        width:95% !important;
    }
    input{
        float:left;
        margin-left:9px;
    }
    .departmentlistN850 ul li{
        background: url("../images/bg_button2.gif");

    }

    .departmentlistN850 ul li span{
        width:125px !important;

    }
    .feild_sex tr td{

    }
    .department:hover .departmentlist{display: block !important;z-index: 999;}
    .feild_sex{
        margin-left: 5px;
        margin-top: 7px;
        width: 75%;
    }
    .chose1 a{
        width:125px !important;
    }
    /*            .popup-content .main_content .form_item_content .edit_form_left .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }
                .popup-content .main_content .form_item_content .edit_form_right .fields_input {
                    float: left;
                    margin-top: 0px !important;
                    width: 100%;
                }*/
    .fields_input {
        float: left;

        width: 100%;
    }
    .buttonsaveS{
        background: url("../images/bg_submit.gif") repeat-x scroll 0 0 transparent;
        border: 0 none;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 0 2px 3px #666666;
        color: #FFFFFF;
        cursor: pointer;
        float: right;
        font-size: 14px;
        font-weight: bold;
        margin: 19px 10px 10px;
        padding: 8px 0;
        text-transform: uppercase;
        width: 98px;
        text-align: center;
    }
    .sidebar .search_box .fields_submit input[type="submit"]{
        width: 98px !important;
    }
    .sidebar .search_boxp {
        background: none repeat scroll 0 0 #E6E9EB;
        float: left;
        height: 300px;
        margin-top: 2%;
        overflow: auto;
        padding: 10px 5px 10px 21px;
        position: absolute;
        width: 30%;
    }
    .moreMail img{
        width: 22px;
        height: 22px;
    }
    .buttonExcel {
        background: url("../images/excelnew.png") repeat-x scroll 0 0 transparent;
        border: 0 none;
        cursor: pointer;
        float: left;
        height: 25px;
        width: 30px;
    }
    .fields_edit img{
        height: 15px;
        width: 16px;
    }
    .deletepage img{
        height: 22px;
        width: 22px;
    }

    .sidebar_search {
        background: url("../images/searchnew.png") no-repeat scroll 100% 0 transparent;
        border: 0 none;
        cursor: pointer;
        float: left;
        height: 26px !important;
        line-height: 43px;
        margin-top: 0;
        padding-right: 31px;
        text-align: left;
    }

    .sidebar_search span {

        color: #FFFFFF;
        float: left;
        font-size: 14px;
        height: 36px;
        padding-left: 18px;
        text-shadow: 2px 2px 3px #333333;
        text-transform: uppercase;
        width: 200px;
    }
    .sidebar_row1 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row2 img{
        height: 30px;
        width: 46px;
    }
    .sidebar_row1{
        width: 4%;
    }

    .sidebar_row2 {
        margin-bottom: 0px;
        width: 2%;
    }

    .sidebar_row2 .sidebar{
        margin-bottom: 0px;
        width: 100% !important;
    }
    .content_right .content .list_content .item .fields_info{
        width: 26% !important;
    }
    .content_right .content .list_content .item .fields_contact_emp{
        width:30% !important;
    }
    .sendSMS_person{
        color: #0055A6;;
        cursor: pointer;
    }
    #togglesms {
        background: none repeat scroll 0 0 #226579;
        float: left;
        right: 0px;
        margin-top: 100px;
        position: absolute;
        z-index: 999;
        border-radius: 3px;
        border: 1px solid #53B4BF;
    }
    .classimageSMS{
        float:left;
    }
     .classimageSMS img{
       height: 26px;
       width: 26px;
    }
    .democolumn{

        background: none repeat scroll 0 0 #4884B5;
        font-size: 11px;
        color: #FFFFFF;
        height: 35px;
        font-weight: bold;
        text-align: center;
    }
    .active{
        display: block;

    }
    .democolumn2{
        background: none repeat scroll 0 0 #FFFFFF;
        font-size: 11px;
        color: #000000;
        padding: 3px;
    }
    .odd{
        background: #E0EFFC;
    }
    .itemcontent{
        cursor: pointer;
    }
    .menutop2 img{
        height: 25px;
        width: 25px;
    }

    .cssgroup {
        background: none repeat scroll 0 0 #2B3844;
        color: white;
        display: none;
        height: 180px;
        margin-left: -111px;
        position: absolute;
        top: 154px;
        width: 150px;

    }
    .itemaction img{
        height: 15px;
        width: 15px;
    }
    .itemstatus img{
        height: 20px;
        width: 18px;
    }

    .icondots{
        cursor: pointer;
    }
    .icondots img{
        height: 10px;
        width: 10px;
    }
    .icondots:hover .addgroup{display: block !important;}
    .addgroup{
        background: none repeat scroll 0 0 #2B3844;
        color: white !important;
        display: none;
        float: left;
        height: auto;
        position: absolute;
        width: 18%;
        z-index: 999;
    }
    .imgFancybox img{
        height: 26px !important;
        width: 30px !important;
    }
</style>